<template>
<el-select v-model="childSelectedValue"
  filterable 
  :loading="loading"
  :remote="remote"
  :size="size"
  :remote-method="remoteMethod"
  :clearable="clearable"
  @change="handleChange"
  @clear="handleClear"
  @focus="handleFocus"
  :style="{width: '100%'}"
  :placeholder="placeholder">
<el-option
  v-for="item in optionSource"
  :key="item[valueKey]"
  :label="item[labelKey]"
  :value="item[valueKey]"  >
</el-option>
<el-pagination
  small
  layout="prev, pager, next, total"
  @current-change="changeNumber"
  :hide-on-single-page="true"
  :page-size="paginationOption.pageSize"
  :current-page="paginationOption.currentPage"
  :pager-count="paginationOption.pagerCount"
  :total="paginationOption.total">
</el-pagination>
</el-select>
</template>
<script>

export default {
name: 'PaginationSelect',
props: {
  //此参数只是为了父组件实现 v-model指令接受参数用，子组件中无实际意义
  //在子组件中通过监听childSelectedValue值，来触发 input 事件，实现子父组件数据绑定
  value:{
    type:String,
    default: ''
  },
  valueKey:{//传入的option数组中，要作为最终选择项的键值名称
    type:String
  },
  labelKey:{//传入的option数组中，要作为显示项的键值名称
    type:String
  },
  clearable :{//是否支持清除，默认支持
    type:Boolean,
    default:true
  },
  remote:{//是否支持远程搜索，默认支持
    type:Boolean,
    default:false
  },
  size:{//组件尺寸，配置项同select  String | medium/small/mini
    type:String,
    default:'medium'
  },
  loading:{//远程数据加载状态显示
    type:Boolean,
    default:false
  },
  placeholder :{
    type:String,
    default:'请输入'
  },
  optionSource:{//下拉框组件数据源
    type:Array,
    required:true
  },
  paginationOption:{//分页配置项
    type:Object,
    default:function () {
    return {
        pageSize:5,//每页显示条数  6条刚好
        currentPage:1,//当前页
        pagerCount:5,//按钮数，超过时会折叠
        total:10 //总条数
      }
    }
  }
},
data () {
  return {
    childSelectedValue:this.value,
  }
},
watch:{
  //监听子组件中选择的值得变化，每当选择一个项后，触发input事件，
  // 将子组件中选择的值通过input事件传递给父组件，实现父组件中v-model绑定的值的双向绑定
  // childSelectedValue(val){
  //   this.$emit("input",val);
  // },
  childSelectedValue (val) {
    this.childSelectedValue = val
  },
  value(val){
    if(val!=null && val.length<1){
      this.childSelectedValue = '';
    }
    else{
      this.childSelectedValue = val;
      this.$emit("initData",val)
    }
  }
},
mounted(){},
methods:{
  //子组件分页器，页码选择事件，父组件中监听子组件的 pageNationChange 事件，获取当前页码
  changeNumber(val){
    //此处的val是页码
    this.$emit("pageNationChange",val);
  },
  // 远程调用方法，在父组件中实现远程方法
  remoteMethod(val){
    if(val!=null && val.length>0){
    //只有输入的字符串长度大于1时，触发
      this.$emit("remote-method",val);
    }else{
      this.childSelectedValue = ' '
    }
  },
  //使组件支持change事件
  handleChange(val){
    this.$emit("change",val);
  },
  //使组件支持clear事件
  handleClear(val){
    this.$emit("clear",val);
  },
  //解决远程搜索无结果时，显示清除按钮问题
  handleFocus(){
    if(this.childSelectedValue==null || this.childSelectedValue=='' ||this.childSelectedValue==undefined){
      this.childSelectedValue = ''
    }
  }
  }
}
</script>


<style scoped>

</style>
